<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
      <template slot="form-action">
      </template>
      <template slot="table-action">
        <el-button @click="batchHandle">批处理</el-button>
        <el-button type="warning" @click="addForm">新增</el-button>
      </template>
    </table-ext>

    <dialog-ext :title="dialogUpdate?'修改':'新增' + config.title" v-model="dialogFormVisible" @cancelDialog="cancel"
                @submitForm="submitForm" @resetDialog="resetForm" width="40%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <!-- 一行排列多个 用法参考http://element-cn.eleme.io/#/zh-CN/component/layout -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="提议编码" prop="offeringCode" style="margin-bottom: 22px">
              <el-input v-model="ruleForm.offeringCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提议" prop="offeringName" style="margin-bottom: 22px">
              <el-input v-model="ruleForm.offeringName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="供应商" prop="vendorName" style="margin-bottom: 22px">
          <el-input v-model="ruleForm.vendorName"></el-input>
        </el-form-item>
        <el-form-item label="发布日期" prop="publishTime" style="margin-bottom: 22px">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.publishTime" style="width: 100%;"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="发布状态" style="margin-bottom: 22px">
          <el-switch v-model="ruleForm.publishStatus" inactive-value="0" active-value="1"></el-switch>
        </el-form-item>
        <el-form-item label="描述" prop="description" style="margin-bottom: 22px">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
      </el-form>
    </dialog-ext>
  </div>
</template>
<script>
  import TableExt from './table-ext.vue';
  import TableIcon from './table-icon';
  import DialogExt from '../dialog-ext/dialog-ext';
  import structureBtn from './structureBtn';
  export default {
    data() {
      return {
        dialogFormVisible: false,
        dialogUpdate: false,
        ruleForm: {
          offeringCode: '',
          offeringName: '',
          vendorName: '',
          publishTime: '',
          publishStatus: '0',
          description: ''
        },
        rules: {
          offeringCode: [
            {required: true, message: '请填写提议编码', trigger: 'blur'}
          ],
          offeringName: [
            {required: true, message: '请填写提议', trigger: 'blur'},
          ],
          vendorName: [
            {required: true, message: '请填写供应商', trigger: 'blur'}
          ],
          publishTime: [
            {required: true, message: '请选择日期', trigger: 'change'}
          ],
          publishStatus: [
            {required: true}
          ]
        },
        config: { // 页面共通配置
          title: '招投标评标', //页面标题
          isPage: false, //是否分页
          isNo: true, //是否显示序号
          selection: true, //是否显示复选框
          tableHeight: '600',
          align: 'center',
          crudMapping: {
            query: {
              url: this.lib.config.host.masterData + '/common/sysdictionary/getDicItems/DLV_FLOW',
              data: {}, //查询默认参数
              resultFun(response) { // 修改返回默认值
                return {
                  list: response.data, //返回列表数据
                  total: response.data.total //返回总数
                };
              }
            },
            delete: {
              url: this.lib.config.host.masterData + '/vendormgt/invite/removeInvite',
            }
          }
        },
        searchForm: [{ // 查询表单配置
          label: '下拉Tree', //显示名
          key: 'treeCode', //数据字段
          type: 'select-tree' //类型
        }, {
          label: '采购组织',
          key: 'orgId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(),
            method: 'get',
            label: 'purOrgName',
            value: 'id'
          }
        },{
          label: '采购组',
          key: 'groupId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroup/getByPurOrgId/{orgId}',
            method: 'post',
            label: 'purGroupName',
            value: 'id'
          }
        }],
        columns: [
          { // 表格列定义
            label: '事件', // 表格header
            render: (h, params) => { // 动态渲染，click事件示例
              let list = structureBtn(h, [{
                text: '查看',
                hidden: true, // 是否隐藏
                click:()=>{  this.$message('第' + params.index + '行     ' + JSON.stringify(params.row));}
              },{
                text: '编辑',
                click:()=>{
                  this.ruleForm = Object.assign({}, this.ruleForm, params.row);
                  this.dialogUpdate = true;
                  this.dialogFormVisible = true;
                }
              }]);
              return h('div',{}, list);
            }
          }, {
            label: '提议编码',
            key: 'name',
//            width: '500',
            order: true
          }, {
            label: '提议',
            key: 'offeringName',
            width: '500',
            hidden: true
          }, {
            label: '供应商',
            key: 'code',
            align: 'center'
          }, {
            label: '描述',
            key: 'createTime'
          }, {
            label: '发布状态',
            key: 'publishStatus',
            render: (createElement, params) => { //动态渲染, 字典表示例
              return createElement(TableIcon, {
                props: {
                  flag: params.row.publishStatus
                }
              });
            }
          }, {
            label: '发布时间',
            key: 'publishTime'
          }, {
            label: '显示字段',
            render: (createElement, params) => { //动态渲染, 普通字符
              if (1 === 1) {
                return createElement('div', {}, 'abc');
              } else {
                return createElement('div', {}, 'abc2');
              }
            }
          }]
      }
    },
    created() {
      this.tempForm = JSON.parse(JSON.stringify(this.ruleForm));
    },
    components: {
      'table-ext': TableExt,
      DialogExt
    },
    methods: {
      submitForm(callBack) {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.dialogUpdate) {
              this.axios.post(this.lib.config.host.masterData + '/vendormgt/invite/update', this.ruleForm).then((res) => {
                if (res.status === 200) {
                  this.$refs['tableExt'].refreshTable();
                  callBack(true);
                }
              }).catch((e) => {
                this.$message({
                  type: 'info',
                  message: '更新失败！'
                });
                callBack(false);
              });
            } else {
              this.axios.post(this.lib.config.host.masterData + '/vendormgt/invite/save', this.ruleForm).then((res) => {
                if (res.status === 200) {
                  this.$refs['tableExt'].refreshTable();
                  callBack(true);
                }
              }).catch((e) => {
                this.$message({
                  type: 'info',
                  message: '新增失败！'
                });
                callBack(false);
              });
            }
          } else {
            callBack(false);
          }
        });
      },
      addForm() {
        this.dialogUpdate = false;
        this.dialogFormVisible = true;
      },
      resetForm() {
        this.ruleForm = JSON.parse(JSON.stringify(this.tempForm));
        this.$refs['ruleForm'].resetFields();
      },
      batchHandle() {
        this.$message({
          type: 'info',
          message: JSON.stringify(this.$refs['tableExt'].multipleSelection)
        });
      },
      cancel() {
        this.resetForm('ruleForm');
      }
    }
  }
</script>
